<template>
	<view>
		<view class="quick-nav">
			<view class="navitem" @click="news">
				<text class="iconfont icon-jiankangma"></text>
				<text class="title">健康码</text>
			</view>

			<view class="navitem" @click="news">
				<text class="iconfont icon-shouye"></text>
				<text class="title">疫苗预约</text>
			</view>

			<view class="navitem" @click="news">
		 	<text class="iconfont icon-yiyuan"></text>
				<text class="title">核酸检测</text>
			</view>

			<view class="navitem" @click="news">
				<text class="iconfont icon-write"></text>
				<text class="title">健康申报</text>
			</view>

			<view class="navitem" @click="news">
				<text class="iconfont icon-icon_home_service"></text>
				<text class="title">志愿服务</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			news() {
				uni.showToast({
					title: '敬请期待',
					duration: 1500,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.quick-nav {
		display: flex;
		justify-content: space-around;
		height: 185rpx;
		text {
			display: block;
		}
		background-color: #fff;
		border-radius: 8px;
	}

	.navitem {
		width: 96rpx;
		text-align: center;
		padding: 0 21rpx;
	}

	.iconfont {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 96rpx;
		background-color: #88c5c3;
		color: #fff;
		font-size: 40rpx;
		margin: 20rpx auto;
	}
	
	.title {
		width: 96rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333;
	}
	
	
</style>
